<template>
  <t-dialog
    v-model:visible="visible"
    header="导入数据"
    width="40%"
    :confirm-on-enter="true"
    :on-confirm="onConfirmAnother"
  >
    <t-row>
      <t-col :span="6">
        <div style="text-align: center">
          <div>1.下载excel数据模板，填写信息</div>
          <img src="@/assets/ic_excel_green.png" style="height: 120px" />
          <t-button style="margin: 10px auto; display: block" @click="clickDownload">下载模板</t-button>
        </div>
      </t-col>

      <t-col :span="6">
        <div style="text-align: center">
          <div>2.上传填写好的excel文件</div>
          <img src="@/assets/ic_excel_gray.png" style="height: 120px" />
          <t-upload
            :action="uploadUrl"
            :abridge-name="[8, 6]"
            :max="1"
            :format-response="formatResponse"
            :data="formData"
          >
            <t-button style="margin: 10px auto; display: block">上传文件</t-button>
          </t-upload>
        </div>
      </t-col>
    </t-row>
  </t-dialog>
</template>
<script>
import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { downloadFile } from '@/common/download.js';

export default {
  props: ['dlUrl', 'uploadUrl', 'formData'],
  setup(props, { emit }) {
    const visible = ref(false);

    const onConfirmAnother = () => {};

    const openExcelDialog = () => {
      visible.value = true;
    };

    const clickDownload = () => {
      downloadFile(props.dlUrl);
    };
    const formatResponse = (e) => {
      console.log('formatResponse', e);
      if (e.success) {
        emit('uploadSuccess');
        MessagePlugin.success('上传成功！');
        visible.value = false;
      } else {
        MessagePlugin.error(e.msg);
      }
    };

    return { visible, onConfirmAnother, openExcelDialog, clickDownload, formatResponse };
  },
};
</script>
